<div class="container-fluid px-3 py-2 bg-light border border-white rounded">
  <div class="m-0 p-0 container-fluid d-flex">
    <div>
      <h5>Page Templates</h5>
    </div>
    <div class='ml-auto'>
      {% include 'snippets/textButton.html' with href='/pages/new' name='New Page Template' type='plus' class='btn-white' attrs="style='color: black; background-color: white'" %}
    </div>
  </div>
  <table class="container-fluid writehat-table table-light table-striped table-hover overflow-auto paginate" id="writehat-pagetemplates">
    <thead>
      <tr>
        <th><strong>Name</strong></th>
        <th><strong>Default</strong></th>
        <th><strong>Created</strong></th>
        <th><strong>Modified</strong></th>
        <th></th>
      </tr>
    </thead>
    <tbody class="text-nowrap">
      {% for page in pages|dictsortreversed:"modifiedDate" %}
        <tr page-id="{{ page.id }}" page-name="{{ page.name }}">
          <td class="pl-2 pageEdit" style="cursor:pointer">{{ page.name }}</td>
          <td class="pageEdit" style="cursor:pointer">{{ page.default }}</td>
          <td class="pageEdit" style="cursor:pointer">{{ page.createdDate }}</td>
          <td class="pageEdit" style="cursor:pointer">{{ page.modifiedDate }}</td>
          <td>
            <div class="floating float-right mt-1">
              {% include 'snippets/smallButton.html' with title='Clone Page' type='copy' class='pageClone text-white' %}
              {% include 'snippets/smallButton.html' with title='Edit Page' type='pen' class='pageEdit text-dark' %}
              {% include 'snippets/smallButton.html' with title='Delete Page' type='times-circle' class='pageDelete text-danger' %}
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
